import Tabs, { TabsProps } from '@/components/Tabs';
import { deviceTreeControllerDeviceTree as dimension } from '@/services/ess/deviceTree';

import { Radio, Space } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { useIntl, useModel } from 'umi';
import Chart from './component/Chart';
import List, { ToolBarRender } from './component/List';
import { TreeNode } from './help';

const Index: React.FC = () => {
  const intl = useIntl();
  const [deviceInfo, setDeviceInfo] = useState([]);
  const listRef = useRef(null);
  const { isArea } = useModel('@@initialState')?.initialState || {};
  console.log(isArea);

  const filterCode = (node: TreeNode, type: string) => {
    switch (type) {
      case 'ROOT':
        return node?.stationCode;
      case 'AREA':
        return node?.areaId;
      default:
        return node?.deviceCode; // 如果没有匹配的 case，可以添加一个 default 分支
    }
  };

  const addUniqueKeyToNodes = (nodes: TreeNode[]): TreeNode[] => {
    return nodes.map((node) => {
      const newNode: TreeNode = {
        ...node,
        key: filterCode(node, node?.nodeType),
      };
      if (newNode.subDevices) {
        newNode.subDevices = addUniqueKeyToNodes(newNode.subDevices);
      }
      return newNode;
    });
  };
  useEffect(() => {
    dimension({ treeLevel: isArea ? '3' : '2', deviceTypes: 'INVERTER' }).then((res) => {
      if (res?.data) {
        const wrappedData = addUniqueKeyToNodes([res.data]);
        setDeviceInfo(wrappedData);
      }
    });
  }, []);
  const [showType, setShowType] = useState('2');

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: intl.formatMessage({
        id: 'statistics.analyze.dayReportS',
      }),
      children:
        showType === '1' ? (
          <List dateType={1} deviceInfo={deviceInfo} ref={listRef} />
        ) : (
          <Chart dateType={1} deviceInfo={deviceInfo} />
        ),
    },
    {
      key: '2',
      label: intl.formatMessage({
        id: 'statistics.analyze.monthReportS',
      }),
      children:
        showType === '1' ? (
          <List dateType={2} deviceInfo={deviceInfo} ref={listRef} />
        ) : (
          <Chart dateType={2} deviceInfo={deviceInfo} />
        ),
    },
    {
      key: '3',
      label: intl.formatMessage({
        id: 'statistics.analyze.yearReportS',
      }),
      children:
        showType === '1' ? (
          <List dateType={3} deviceInfo={deviceInfo} ref={listRef} />
        ) : (
          <Chart dateType={3} deviceInfo={deviceInfo} />
        ),
    },
  ];

  return (
    <div>
      <Tabs
        items={items}
        destroyInactiveTabPane={true}
        tabBarExtraContent={
          <Space>
            <Radio.Group
              value={showType}
              buttonStyle="solid"
              onChange={(event) => {
                setShowType(event?.target.value);
              }}
              className="global-group-radio-button"
            >
              <Radio.Button value="1">
                {intl.formatMessage({
                  id: 'statistics.common.list',
                })}
              </Radio.Button>
              <Radio.Button value="2">
                {intl.formatMessage({
                  id: 'statistics.common.chart',
                })}
              </Radio.Button>
            </Radio.Group>
            {showType === '1' && <ToolBarRender tableRef={listRef} />}
          </Space>
        }
      />
    </div>
  );
};
export default Index;
